<template>
	<view class="components-budget-bar-container">
		<view class="components-budget-bar-title-container">
			<view class="components-budget-bar-title-content">预算</view>
		</view>
		<!-- 每条bar -->
		<view class="components-budget-bar-item-container" >
			<view class="components-budget-bar-title-item" v-for="(item, index) in categoryList" :key="index" >
				<view class="components-budget-bar-title-item-inner-bar" :style="{width: item.ratio, backgroundColor: '#fdc9ca'}"></view>
				<!-- 明细容器 图标 名字 预算 余额 -->
				<view class="components-budget-bar-title-item-container">
					<view class="components-budget-bar-title-item-left-container">
						<view class="components-budget-bar-title-item-left-icon-container">
							<view class="components-budget-bar-title-item-left-icon-bgc-container" :style="{backgroundColor: item.bgcColor}">
								<view :class="['components-budget-bar-title-item-left-icon-content','iconfont', item.icon]"></view>
							</view>
						</view>
						<!-- 名字 -->
						<view class="components-budget-bar-title-item-left-name-container">
							测试2
						</view>
					</view>
					<view class="components-budget-bar-title-item-right-container">
						<view class="components-budget-bar-title-item-right-up-container">
							<view class="components-budget-bar-title-item-right-down-item-budget">预算</view>
							<view class="components-budget-bar-title-item-right-up-budget">¥ {{item.budget ? item.budget : "0"}}</view>
						</view>
						<view class="components-budget-bar-title-item-right-down-container">
							<view class="components-budget-bar-title-item-right-down-item-pay">支出</view>
							<view class="components-budget-bar-title-item-right-down-item-money">¥ {{item.balance ? item.balance : "0"}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			message:{
			  type: String,
			  default: '测试'
			},
			categoryList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				
			};
		},
		methods: {
			// 点击事件
			clickTip() {
				this.$emit('showSelectTimeFunction');
			},
			// 失去焦点事件
			loseBulr(){
				console.log("123121")
			}
		}
	}
</script>

<style lang="scss">
	.components-budget-bar-container{
		width: 100%;
		min-height: 40rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		background-color: white;
		box-shadow: 0px 0px 2px #dfdede;
		padding: 20rpx;
		box-sizing: border-box;
		
		.components-budget-bar-title-container {
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
			
			.components-budget-bar-title-content {
				font-size: 30rpx;
				font-weight: 400;
			}
			
		}
		
		.components-budget-bar-item-container {
			width: 100%;
			min-height: 80rpx;
			
			.components-budget-bar-title-item {
				width: 100%;
				height: 80rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				background-color: $themeBgcLightGreyColor;
				position: relative;
				
				.components-budget-bar-title-item-inner-bar {
					width: 100%;
					height: 100%;
					// background-color: #d1efe5;
					border-radius: 10rpx;
				}
				.components-budget-bar-title-item-container {
					width: 100%;
					height: 80rpx;
					z-index: 99;
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					
					.components-budget-bar-title-item-left-container {
						width: 60%;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						
						.components-budget-bar-title-item-left-icon-container {
							width: 20%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
								.components-budget-bar-title-item-left-icon-bgc-container {
									width: 65rpx;
									height: 65rpx;
									border-radius: 50%;
									display: flex;
									justify-content: center;
									align-items: center;
									
									.components-budget-bar-title-item-left-icon-content {
										font-size: 40rpx;
										color: white;
									}
								}
						}
						
						.components-budget-bar-title-item-left-name-container {
							width: 80%;
							height: 100%;
							font-size: 30rpx;
							margin-left: 10rpx;
							line-height: 80rpx;
						}
					}
					
					.components-budget-bar-title-item-right-container {
						width: 25%;
						height: 100%;
						
						
						.components-budget-bar-title-item-right-up-container {
							width:  100%;
							height: 50%;
							display: flex;
							justify-content: flex-start;
							align-items: flex-end;
							font-size: 20rpx;
							
							.components-budget-bar-title-item-right-down-item-budget {
								margin-right: 10rpx;
							}
							
							.components-budget-bar-title-item-right-up-budget {
							}
						}
						
						.components-budget-bar-title-item-right-down-container {
							width:  100%;
							height: 50%;
							display: flex;
							justify-content: flex-start;
							align-items: flex-start;
							font-size: 20rpx;
							.components-budget-bar-title-item-right-down-item-pay {
								margin-right: 10rpx;
							}
							
							.components-budget-bar-title-item-right-down-item-money {
								color: $typefaceRedColor;
							}
						}
					}
				}
			}
		}
	}
</style>
